<template>
	<view class="commonProblem">
		<u-tabs :list="list" sticky :current="current" @change="clickTabs" active-color="#333333" inactive-color="#999999"></u-tabs>
		<view class="commonProblem-box" v-if="current==0">
			<view class="hotIssues" v-for="(item,index) in hotList" :key='index'>
				<text>{{item.text}}</text>
				<image src="../../static/mine/rightjiantou.png" mode=""></image>
			</view>
		</view>
		<view class="" v-if="current==1">
			2
		</view>
		<view class="" v-if="current==2">
			3
		</view>
		<view class="" v-if="current==3">
			4
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:0,
				list: [{
					name: '热门问题',
				}, {
					name: '交易',
				}, {
					name: '账户'
				}, {
					name: '好友'
				}],
				hotList:[
					{
						text:'我的头像该怎么修改?'
					},
					{
						text:'我的头像该怎么修改'
					},
					{
						text:'我的头像该怎么修改'
					},
					{
						text:'我的头像该怎么修改'
					},
					{
						text:'我的头像该怎么修改'
					}
				]
			}
		},
		methods: {
			clickTabs(index) {
				this.current = index
			}
		}
	}
</script>

<style scoped lang="less">
/deep/.u-tab-bar{
	display: none;
}
/deep/.u-tab-item {
	padding: 0 60rpx !important;
}
.commonProblem-box{
	padding: 0 40rpx;
	.hotIssues{
		border-bottom: 1px solid #DFDFDF;
		padding-bottom: 22rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 40rpx;
		text{
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}
		image{
			width: 16rpx;
			height: 32rpx;
		}
	}
}
</style>
